// pc:elemnt plus url:https://element-plus.gitee.io/zh-CN/component/button.html

// form components
export const checkbox = (options, model, desc = '') => {
  let str = ''
  // eslint-disable-next-line no-undef
  for (label in options) {
    // eslint-disable-next-line no-undef
    str += `  <el-checkbox label="${label}" v-model="${options[label]}"  />`
  }
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-checkbox-group v-model="form.${model}">
      ${str}
      </el-checkbox-group>
    </el-form-item>
`
}

export const radio = (options, model, desc = '') => {
  let str = ''
  // eslint-disable-next-line no-undef
  for (label in options) {
    // eslint-disable-next-line no-undef
    str += `  <el-radio label="${label}" v-model="${options[label]}"  />`
  }
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-radio-group v-model="form.${model}" class="ml-4">
      ${str}
      </el-radio-group>
    </el-form-item>
  `
}

export const datePicker = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-date-picker v-model="form.${model}" type="date" placeholder="请选择${desc}" size="small"/>
    </el-form-item>
`
}
export const datimePicker = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-date-picker v-model="form.${model}" type="datetime" placeholder="请选择${desc}" format="YYYY/MM/DD hh:mm:ss"/>
    </el-form-item>
  `
}

export const input = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-input v-model="form.${model}" placeholder="请输入${desc}" style='width:300px' />
    </el-form-item>
`
}
export const inputNumber = (model, desc = '', min, max, step) => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-input-number :min='${min}' :max='${max}' :step='${step}'  v-model="form.${model}" placeholder="请输入${desc}" />
    </el-form-item>
`
}

export const textarea = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-input v-model="form.${model}" :rows="2" type="textarea" placeholder="请输入${desc}"/>
    </el-form-item>
`
}

// to do as select component
// you can select more when the single is false
export const select = (url, model, single, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <Select :url='"${url}"' v-model='form.${model}' :desc="'${desc}'" :single="${single}" />
    </el-form-item>
`
}

export const elSelect = (model, options, desc = '', single = true) => {
  let elOptions = ''
  for (const label in options) {
    elOptions += `<el-option label='${label}' value='${options[label]}' />`
  }
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-select v-model='form.${model}' class="m-2" placeholder="${desc}" :multiple='${!single}'>
      ${elOptions}
      </el-select>
    </el-form-item>
`
}
export const timePicker = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-time-picker v-model="form.${model}" arrow-control
      placeholder="请选择${desc}"/>
    </el-form-item>
`
}
export const timeSelect = (model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-time-select v-model="form.${model}" start="00:00" step="00:10" end="24:00" placeholder="请选择${desc}"/>
    </el-form-item>
`
}

export const formSwitch = (activeValue, inactiveValue, activeText, inactiveText, model, desc = '') => {
  return `
    <el-form-item label="${desc}" prop="${model}">
      <el-switchv-model="form.${model}" active-value="${activeValue}" inactive-value="${inactiveValue}" active-text="${activeText}" inactive-text="${inactiveText}"/>
    </el-form-item>
  `
}
